<template>
  <div class="imageInfo">
    <a-carousel arrows dots-class="slick-dots slick-thumb">
      <template #customPaging="props">
        <a>
          <img :src="getImgUrl(props.i)" />
        </a>
      </template>
      <div v-for="item in 4" :key="item">
        <img :src="getImgUrl(item - 1)" />
      </div>
    </a-carousel>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';

  defineOptions({ name: 'ImageInfo' });

  const baseUrl = 'https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/';

  const state = reactive({
    name: 'vue3',
  });

  const getImgUrl = (i: number) => {
    return `${baseUrl}abstract0${i + 1}.jpg`;
  };
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .imageInfo {
    width: 100%;
    height: 100%;
  }
  /* For demo */
  .ant-carousel {
    height: 100%;
    :deep(.slick-dots) {
      position: relative;
      height: auto;
    }
    :deep(.slick-slide img) {
      border: 5px solid #fff;
      display: block;
      margin: auto;
      max-width: 100%;
      height: 530px;
    }
    :deep(.slick-arrow) {
      display: none !important;
    }
    :deep(.slick-thumb) {
      bottom: 0px;
    }
    :deep(.slick-thumb li) {
      width: 60px;
      height: 45px;
    }
    :deep(.slick-thumb li img) {
      width: 100%;
      height: 100%;
      filter: grayscale(100%);
      display: block;
    }
    :deep .slick-thumb li.slick-active img {
      filter: grayscale(0%);
    }
  }
</style>
